<!DOCTYPE html>
<html lang="en">

<head>
    <title>书刊订购</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../css/base.css" />
    <link rel="stylesheet" href="../css/login.css" />
    <link rel="stylesheet" href="../plugins/layui/css/layui.css">
    <link rel="stylesheet" href="../plugins/layer/skin/layer.css">
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../css/home.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../plugins/font/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css">

</head>

<body>
<div id="main">
    <!-- 整体 -->
    <el-container :style="main_style">
        <!-- 右边导航栏 -->
        <el-aside width="200px" style="background-color: rgb(238, 240, 243)">
            <el-menu :default-openeds="['0', '3']">

                <el-submenu index="0">
                    <template slot="title"><i class="el-icon-menu"></i><a href="home.html">首页</a></template>
                </el-submenu>

                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-message"></i>管理</template>

                    <el-menu-item-group v-if="user.role=='管理员'">
                        <template slot="title">管理用户及书刊</template>
                        <el-menu-item index="1-1">
                            <a href="user-manage.html">用户管理</a>
                        </el-menu-item>
                        <el-menu-item index="1-2"><a href="news-manage.html">书刊管理</a></el-menu-item>
                    </el-menu-item-group>


                    <el-menu-item-group title="管理个人信息" v-if="user.role=='用户'||user.role=='管理员'">
                        <el-menu-item index="1-3"><a href="user-info.html">用户管理</a></el-menu-item>
                    </el-menu-item-group>
                </el-submenu>

                <el-submenu index="2" v-if="user.role=='用户'||user.role=='管理员'">
                    <template slot="title"><i class="el-icon-menu"></i>订阅</template>
                    <el-menu-item-group>
                        <el-menu-item index="2-1"><a href="news-order.html">报纸订阅</a></el-menu-item>
                    </el-menu-item-group>
                </el-submenu>

                <el-submenu index="3" v-if="user.role=='用户'||user.role=='管理员'">
                    <template slot="title"><i class="el-icon-setting"></i>订单</template>
                    <el-menu-item-group v-if="user.role=='管理员'">
                        <template slot="title">全部</template>
                        <el-menu-item index="3-1"><a href="all-order.html">全部订单</a></el-menu-item>
                    </el-menu-item-group>

                    <el-menu-item-group v-if="user.role=='用户'||user.role=='管理员'">
                        <template slot="title">个人</template>
                        <el-menu-item index="3-2"><a href="my-order.html">个人订单</a></el-menu-item>
                    </el-menu-item-group>

                </el-submenu>
            </el-menu>
        </el-aside>

        <!-- 右边的块 -->
        <el-container>
            <!-- 上边用户操作 -->
            <el-header style="text-align: right; font-size: 12px">
                <el-dropdown>
                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item><a href="user-info.html">修改密码</a></el-dropdown-item>
                        <el-dropdown-item><a href="user-info.html">个人中心</a></el-dropdown-item>
                        <el-dropdown-item><a href="javascript:;" @click="logout()">注销</a></el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <span>{{user.userName}}</span>
            </el-header>

            <!-- 主界面 -->
            <el-main style="padding: 0;">
                <div id="app">

                    <div class="app-container">
                        <div class="box">
                            <!-- 操作 -->
                            <div class="filter-container">

                                <el-input placeholder="书刊名称" v-model="pagination.name" style="width: 200px;" class="filter-item"></el-input>

                                <el-button @click="getAll()" class="dalfBut">查询</el-button>

                            </div>

                            <!--添加数据对话框表单-->
                            <el-dialog title="订购报刊" :visible.sync="dialogAddVisible" width="50%">

                                <el-form ref="addForm" :model="addForm" label-width="180px">

                                    <el-form-item label="报刊名称">
                                        <el-input :disabled="true" v-model="addForm.name"></el-input>
                                    </el-form-item>
                                    <el-form-item label="报纸单价">
                                        <el-input :disabled="true" v-model="addForm.price"></el-input>
                                    </el-form-item>
                                    <el-form-item label="出版单位">
                                        <el-input :disabled="true" v-model="addForm.publisher"></el-input>
                                    </el-form-item>
                                    <el-form-item label="数量">
                                        <el-input v-model="addForm.num"></el-input>
                                    </el-form-item>
                                    <el-form-item label="地址">
                                        <el-input  v-model="addForm.addressName"></el-input>
                                    </el-form-item>
                                    <el-form-item label="收货人姓名">
                                        <el-input v-model="addForm.addressRecipient"></el-input>
                                    </el-form-item>
                                    <el-form-item label="电话号码">
                                        <el-input v-model="addForm.addressTelephone"></el-input>
                                    </el-form-item>
                                    <el-form-item label="邮编">
                                        <el-input v-model="addForm.addressPostcode"></el-input>
                                    </el-form-item>

                                    <el-form-item>
                                        <el-button type="primary" @click="toApply">订购</el-button>
                                        <el-button @click="dialogAddVisible = false">取消</el-button>
                                    </el-form-item>
                                </el-form>

                            </el-dialog>


                            <el-dialog title="订购报刊" :visible.sync="dialogIsAddVisible" width="50%">
                                <el-tag align="center"><h3>您需要支付的金额为{{total}}</h3></el-tag>
                                <img src="https://picture-1309137896.cos.ap-shanghai.myqcloud.com/typora/zhifu.jpg" height="50px">
                                <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
                                <el-form ref="addForm" :model="addForm" label-width="180px">

                                    <el-form-item label="报刊名称">
                                        <el-input :disabled="true" v-model="addForm.name"></el-input>
                                    </el-form-item>
                                    <el-form-item label="报纸单价">
                                        <el-input :disabled="true" v-model="addForm.price"></el-input>
                                    </el-form-item>
                                    <el-form-item label="出版单位">
                                        <el-input :disabled="true" v-model="addForm.publisher"></el-input>
                                    </el-form-item>
                                    <el-form-item label="数量">
                                        <el-input :disabled="true" v-model="addForm.num"></el-input>
                                    </el-form-item>
                                    <el-form-item label="地址">
                                        <el-input :disabled="true"  v-model="addForm.addressName"></el-input>
                                    </el-form-item>
                                    <el-form-item label="收货人姓名">
                                        <el-input :disabled="true" v-model="addForm.addressRecipient"></el-input>
                                    </el-form-item>
                                    <el-form-item label="电话号码">
                                        <el-input :disabled="true" v-model="addForm.addressTelephone"></el-input>
                                    </el-form-item>
                                    <el-form-item label="邮编">
                                        <el-input :disabled="true" v-model="addForm.addressPostcode"></el-input>
                                    </el-form-item>

                                    <el-form-item>
                                        <el-button type="primary" @click="add()">已支付，订购！</el-button>
                                        <el-button @click="dialogIsAddVisible = false">取消订购</el-button>
                                    </el-form-item>
                                </el-form>

                            </el-dialog>

                            <el-dialog title="开票" :visible.sync="dialogIsBillingVisible" width="50%">

                                <el-form ref="addForm" :model="tableData" label-width="180px">

                                    <el-form-item label="总金额">
                                        <el-input :disabled="true" v-model="tableData.total"></el-input>
                                    </el-form-item>
                                    <el-form-item label="订单id">
                                        <el-input :disabled="true" v-model="tableData.orderId"></el-input>
                                    </el-form-item>
                                    <el-form-item label="报刊名称">
                                        <el-input :disabled="true" v-model="tableData.name"></el-input>
                                    </el-form-item>
                                    <el-form-item label="报纸单价">
                                        <el-input :disabled="true" v-model="tableData.price"></el-input>
                                    </el-form-item>
                                    <el-form-item label="出版单位">
                                        <el-input :disabled="true" v-model="tableData.publisher"></el-input>
                                    </el-form-item>
                                    <el-form-item label="数量">
                                        <el-input :disabled="true" v-model="tableData.num"></el-input>
                                    </el-form-item>
                                    <el-form-item label="地址">
                                        <el-input :disabled="true"  v-model="tableData.addressName"></el-input>
                                    </el-form-item>
                                    <el-form-item label="收货人姓名">
                                        <el-input :disabled="true" v-model="tableData.addressRecipient"></el-input>
                                    </el-form-item>
                                    <el-form-item label="电话号码">
                                        <el-input :disabled="true" v-model="tableData.addressTelephone"></el-input>
                                    </el-form-item>
                                    <el-form-item label="邮编">
                                        <el-input :disabled="true" v-model="tableData.addressPostcode"></el-input>
                                    </el-form-item>

                                    <el-form-item>
                                        <el-button @click="dialogIsBillingVisible = false">关闭</el-button>
                                    </el-form-item>
                                </el-form>

                            </el-dialog>


                            <el-table size="small"
                                      ref="handSelectTest_multipleTable" current-row-key="id" :data="dataList" stripe highlight-current-row>


                                <el-table-column type="index" align="center" label="序号"></el-table-column>

                                <el-table-column prop="id" label="id" align="center"></el-table-column>

                                <el-table-column prop="name" label="报刊名称" align="center"></el-table-column>

                                <el-table-column prop="price" label="单价" align="center"></el-table-column>

                                <el-table-column prop="pageSize" label="版面规格" align="center"></el-table-column>

                                <el-table-column prop="publisher" label="出版单位" align="center"></el-table-column>


                                <el-table-column label="操作" align="center">

                                    <template slot-scope="scope">

                                        <el-button type="primary" size="mini" @click="handleadd(scope.row)">订购</el-button>

                                    </template>

                                </el-table-column>

                            </el-table>

                            <!--分页工具条-->
                            <el-pagination class="" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="pagination.pageSizes" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">

                            </el-pagination>

                        </div>
                    </div>


                </div>
            </el-main>

        </el-container>
    </el-container>

</div>


<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="../plugins/layui/layui.js"></script>
<script type="text/javascript" src="../plugins/layer/layer.js"></script>
<script src="../js/vue.js"></script>
<script src="../js/axios-min.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="../plugins/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="../js/news-order.js"></script>

<script>
</script>
</body>

</html>